<!DOCTYPE html>
<html>
  <head>
    <title>Google v3 with Overlay Test</title>
    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="../../examples/style.css" type="text/css">
    <style type="text/css">
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #text {
            position: absolute;
            top: 1em;
            right: 1em;
            width: 512px;
            z-index: 20000;
            background-color: white;
            padding: 0 0.5em 0.5em 0.5em;
        }
    </style>
    <script src="http://maps.google.com/maps/api/js?v=3.6&amp;sensor=false"></script>
    <script src="../../lib/OpenLayers.js"></script>
  </head>
  <body>
    <div id="map"></div>
      <div id="text">
          <h1 id="title">Google v3 with Overlay Test</h1>

        <div id="docs">
            <p>This test shows that the Google layer and overlays are not in sync while dragging or zooming.</p>
        </div>
    </div>
    <script type="text/javascript">
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            units: "m",
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508)
        };
        var map = new OpenLayers.Map('map', options);
        var gmap = new OpenLayers.Layer.Google(
            "Google Streets", {sphericalMercator: true}
        );
        var states = new OpenLayers.Layer.WMS(
            "USA States", "http://demo.opengeo.org/geoserver/wms",
            {layers: "topp:states", transparent: true}
        );
        map.addLayers([gmap, states]);
        map.setCenter(new OpenLayers.LonLat(-10028537.429619, 4598451.0222853), 5);
    </script>
  </body>
</html>
